<template>
    <div class="home">
        <dv-full-screen-container>
            <div style="display: flex;justify-content: space-between;">
                <dv-decoration-8 style="width:30%;height:6vh;" />
                <div class="title" style="width:45%;">智慧殡葬调度中心 <span class="title-span">{{ nowDate }}</span></div>
                <dv-decoration-8 :reverse="true" style="width:30%;height:6vh;" />
            </div>
            <div style="height: 50vh;display: flex; justify-content: center; align-items: flex-end">
                <el-button 
                    type="primary"
                    size="large"
                    style="width: 300px; height: 200px; font-size: 50px;"
                    :style="{background: `url(${bgImg})`, 'background-size': '100% 100%'}"
                    @click="$router.push('/?type=殡仪馆')"
                >
                    殡仪馆
                </el-button>
                <el-button 
                    type="primary"
                    size="large"
                    style="width: 300px; height: 200px; font-size: 50px;"
                    :style="{background: `url(${bgImg})`, 'background-size': '100% 100%'}"
                    @click="$router.push('/?type=民政局')"
                >
                    民政局
                </el-button>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script lang="ts" setup >
    import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, onBeforeUnmount } from 'vue'
    import type { Ref, Raw } from 'vue'
    // import {  } from '@/apis'

    import { useRoute } from 'vue-router'
    const route = useRoute()
    import bgImg from '@/assets/bg/bg18.png'

    const nowDate: Ref<string> = ref('')
    const timer: Ref<any> = ref()

    onBeforeMount(() => {
        nowDate.value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, 0) + '-' + new Date().getDate().toString().padStart(2, 0) + ' ' + new Date().getHours().toString().padStart(2, 0) + ':' + new Date().getMinutes().toString().padStart(2, 0) + ':' + new Date().getSeconds().toString().padStart(2, 0)
        timer.value = setInterval(() => {
            nowDate.value = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, 0) + '-' + new Date().getDate().toString().padStart(2, 0) + ' ' + new Date().getHours().toString().padStart(2, 0) + ':' + new Date().getMinutes().toString().padStart(2, 0) + ':' + new Date().getSeconds().toString().padStart(2, 0)
        }, 1000)
    })
    onMounted(() => {
    })
    onBeforeUnmount(() => {
        clearInterval(timer.value)
    })

</script>
<style lang="scss" scoped>
    .home {
        width: 100vw;
        height: 100vh;
        background-image: url('@/assets/bg/bg18.png'); 
        background-size: 100% 100%;
    }
    .title {
        color: rgb(188, 220, 224);
        font-weight: bold;
        font-size: 30px;
        position: relative;
        .title-span {
            position: absolute;
            font-size: 20px;
            font-weight: normal;
            padding-left: 30px;
            padding-top: 15px;
        }
    }
    .tip {
        text-align: left;
        padding: 1vh 0.5vw;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        :nth-child(1) {
            font-size: 18px;
            font-weight: bold;
        }
    }
    .tip::before{
        content: '';
        background-color: rgb(24 124 183);
        border: 0.2vw solid rgb(24 124 183);
        height: 2.3vh;
        border-radius: 0.2vw;
        margin-right: 0.5vw;
        box-sizing: border-box;
    }
  
    .common-margin {
        padding: 0 1vw;
    }
    .map-box {
        width: 100%;
        //height: 220px;
        height: 88%;
        box-sizing: border-box;
        padding: 0 1vw 0 1vw;
    }
    .mapClass {
        width: 100%;
        height: 100%;
        // height: 260px;
    }
    // 业务实时数据
    .by-bzc-tj {
        display: grid;
        grid-template-columns: repeat(3, 33.3%);
        grid-template-rows: repeat(2, 50%);
        justify-items: center;
        align-items: center;
        font-size: 14px;
        .by-bzc-tj-border {
            width: 85%;
            height: 60%;
            border: 1px solid #fff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .by-bzc-tj-border-color-1 {
            color: rgb(89, 133, 87);
            box-sizing: border-box;
            border: 1px solid rgb(89, 133, 87);
        }
        .by-bzc-tj-border-color-2 {
            color: rgb(111, 156, 242);
            box-sizing: border-box;
            border: 1px solid rgb(111, 156, 242);
        }
        .by-bzc-tj-border-color-3 {
            color: rgb(114, 124, 256);
            box-sizing: border-box;
            border: 1px solid rgb(114, 124, 256);
        }
        .by-bzc-tj-border-color-4 {
            color: rgb(73, 164, 223);
            box-sizing: border-box;
            border: 1px solid rgb(73, 164, 223);
        }
        .by-bzc-tj-border-color-5 {
            color: rgb(18, 226, 98);
            box-sizing: border-box;
            border: 1px solid rgb(18, 226, 98);
        }
        .by-bzc-tj-border-color-6 {
            color: rgb(162, 154, 199);
            box-sizing: border-box;
            border: 1px solid rgb(162, 154, 199);
        }
    }
    .swtj-byfwtj {
        display: flex;
        & > div {
            // width: 33.3%;
            flex: 1;
        }
    }
    // 冷藏柜
    .lcg-box {
        width: 41px;
        height: 20px;
        border: 1px solid #fff;
        border-radius: 5%;
        margin: 0 5px;
    }
    .bg-color-1 {
        background-color: rgb(59, 108, 147);
    }
    .bg-color-2 {
        background-color: #e5c11e;
    }
    .bg-color-3 {
        background-color: brown;
    }
    .bg-color-4 {
        background-color: #7c6464;
    }
    .bg-color-5 {
        background-color: rgb(195, 144, 208)
    }
    .bg-color-6 {
        background-color: rgb(147, 223, 244)
    }
    .list-enter-active {
        transition: opacity 1s ease;
    }
    .list-enter-from,
    .list-leave-to {
        opacity: 0;
    }
    .refrigeratedCabinet-box {
        // width: 153px;
        // height: 45px;
        display: flex;
    }
    .refrigeratedCabinet-box-text {
        width: 81px;
        height: 24px;
        line-height: 24px;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        border: 1px solid #fff;
        border-radius: 5%;   
        margin: 5px;
        font-size: 16px;
        span:nth-child(2) {
            color: rgb(250, 247, 247);
            font-weight: bold;
            font-size: 16px;
        }
    }
    .common-margin-1 {
        margin: 0 20px;
        // font-size: 10px;
    }
    .common-margin-2 {
        // font-size: 10px;
    }
    // 火化炉
    .cremator-box1 {
        background: url(@/assets/cremator/1.png);
        background-size: 100% 100%;
        width: 58px;
        height: 110px;
        margin-bottom: 10px;
    }
    .cremator-box2 {
        background: url(@/assets/cremator/2.png);
        background-size: 100% 100%;
        width: 58px;
        height: 110px;
        margin-bottom: 10px;
    }
    .color-5 {
        color: rgb(195, 144, 208)
    }
    .color-6 {
        color: rgb(147, 223, 244)
    }
    
    // 弹框标题
    :deep(.el-dialog__title) {
        color: #fff;
    }
</style>
